<!-- eslint-disable vue/require-v-for-key -->
<!-- eslint-disable vue/valid-v-for -->
<template>
  <div class="content-wk">
    <el-form
      v-show="showSearch"
      ref="queryForm"
      :model="queryParams"
      size="small"
      :inline="true"
    >
      <el-form-item label="数据源名称/IP" prop="queryKeywords">
        <el-input
          v-model="queryParams.queryKeywords"
          placeholder="数据源名称/IP"
          clearable
          style="width: 240px"
          @keyup.enter.native="getList"
        />
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleSearch"
        >查询</el-button>
        <el-button
          icon="el-icon-refresh"
          size="mini"
          @click="resetQuery"
        >重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb20 mt2">
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
        >新增
        </el-button>
      </el-col>
    </el-row>
    <style-type
      v-if="styleType"
      :data-list="roleList"
      @handleUpdate="handleUpdate"
      @handleDelete="handleDelete"
    />
    <HkTable
      :total="total"
      :table-data="planList"
      :query-params="queryParams"
      :table-columns="qualtableLabel"
      :show-index="true"
      :operate="true"
      class="targetTable"
      @changePage="getList"
    >
      <template #tasks="scope">
        <div v-if="scope.row.tasks.length < 3">
          <el-popover
            v-for="(item, i) in scope.row.tasks"
            :key="i"
            trigger="hover"
            placement="top"
          >
            <p>{{ item }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag
                class="el-tag-custom"
                size="medium"
                style="margin-bottom: 2px"
              >
                {{ item }}
              </el-tag>
            </div>
          </el-popover>
        </div>
        <div v-else>
          <el-popover
            v-for="(item) in scope.row.tasks.slice(0, 2)"
            trigger="hover"
            placement="top"
          >
            <p>{{ item }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag
                class="el-tag-custom"
                size="medium"
                style="margin-bottom: 2px"
              >
                {{ item }}
              </el-tag>
            </div>
          </el-popover>
          <el-popover trigger="hover" placement="top">
            <div
              v-for="(item) in scope.row.tasks.slice(2)"
              size="medium"
              style="margin-bottom: 2px"
            >
              <el-tag> {{ item }}</el-tag>
            </div>
            <span slot="reference">.....</span>
          </el-popover>
        </div>
      </template>
      <template #operate="scope">
        <el-button type="text" @click="handleUpdate(scope.row)">编辑</el-button>
        <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
      </template>
    </HkTable>

    <!-- 添加或修改角色配置对话框 -->
    <KafkaDialog
      :id="id"
      ref="kafkaRef"
      :title="title"
      :form-data="formData"
      v-bind="$attrs"
      @changeOpen="changeOpen"
    />
  </div>
</template>

<script>
import KafkaDialog from './KafkaDialog'
import styleType from '../styleType'
import HkTable from '@/components/Hk-Table/index'
import {
  getSource,
  delSource,
  getPostsource
} from '@/api/milkyway/repositorypage'

export default {
  name: 'Syslog',
  components: { KafkaDialog, styleType, HkTable },
  props: {
    id: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      planList: [],
      qualtableLabel: [
        { label: '数据源名称', param: 'name' },
        { label: '队列服务IP', param: 'ip' },
        { label: '端口', param: 'port' },
        { label: '主题名', param: 'topic' },
        { label: '关联任务', param: 'tasks', type: 'slot' }
      ],
      styleType: false,
      formData: {},
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 角色表格数据
      roleList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      metaId: '',

      // 查询参数
      queryParams: {
        current: 1,
        size: 10
      },
      // 表单参数
      form: {}
    }
  },
  created() {
    this.getList()
  },
  methods: {
    changeOpen() {
      this.$emit('changeOpen')
      this.getList()
    },
    getDetails(res) {
      const _res = res
      if (Array.isArray(res)) {
        _res.forEach((item) => {
          const _data = JSON.parse(item.connectInfo)
          item.databaseTypeId = _data.databaseTypeId || undefined
          item.databaseName = _data.databaseName || undefined
          item.tableName = _data.tableName || undefined
          item.topic = _data.topic || undefined
          item.groupId = _data.groupId || undefined
          item.protocol = _data.protocol || undefined
          item.indexName = _data.indexName || undefined
          item.metaName = item.jsonObject.metaName || undefined
          item.metaId = item.jsonObject.metaId
          item.taskNums = item.jsonObject.taskNums || undefined
          item.tasks = item.jsonObject.tasks || undefined
        })
      } else {
        const data = JSON.parse(_res.connectInfo)
        _res.databaseTypeId = data.databaseTypeId || undefined
        _res.databaseName = data.databaseName || undefined
        _res.tableName = data.tableName || undefined
        _res.topic = data.topic || undefined
        _res.groupId = data.groupId || undefined
        _res.protocol = data.protocol || undefined
        _res.indexName = data.indexName || undefined
      }
      return _res
    },
    /** 查询角色列表 */
    getList(val) {
      this.loading = true
      this.queryParams = {
        ...this.queryParams,
        ...val,
        scrollToTop: true,
        sourceType: 'Kafka'
      }
      getSource(this.queryParams).then((res) => {
        this.planList = this.getDetails(res.list)
        this.total = res.total
        this.loading = false
        this.queryParams.scrollToTop = false
      })
    },

    // 表单重置
    reset() {
      if (this.$refs.menu != undefined) {
        this.$refs.menu.setCheckedKeys([])
      }
      // eslint-disable-next-line no-sequences
      (this.menuExpand = false),
      (this.menuNodeAll = false),
      (this.deptExpand = true),
      (this.deptNodeAll = false),
      (this.form = {
        roleId: undefined,
        roleName: undefined,
        roleKey: undefined,
        roleSort: 0,
        status: '0',
        menuIds: [],
        deptIds: [],
        menuCheckStrictly: true,
        deptCheckStrictly: true,
        remark: undefined
      })
      this.resetForm('form')
    },
    //  查询
    handleSearch() {
      this.queryParams.current = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = []
      this.resetForm('queryForm')
      this.getList()
    },

    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      this.$refs.kafkaRef.isOpen = true
      this.formData = {}
      this.title = '添加'
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      getPostsource({ id: row.id }).then((res) => {
        this.formData = this.getDetails(res)
      })

      this.reset()
      this.$refs.kafkaRef.isOpen = true
      this.title = '编辑'
    },

    /** 删除按钮操作 */
    handleDelete(row) {
      const id = row.id
      const name = row.name
      this.$modal
        .confirm('是否确认删除数据源名称为"' + name + '"的数据项？')
        .then(function() {
          return delSource({ id })
        })
        .then(() => {
          this.getList()
          this.$modal.msgSuccess('删除成功')
        })
        .catch(() => {})
    }
  }
}
</script>
<style lang="scss">
.targetTable{
  overflow: hidden;
}
.el-popover.el-popper {
  margin: 0;
  box-sizing: border-box;
  max-height: 300px;
  overflow: auto;
  p {
    padding: 0;
    margin: 0;
  }
}
.el-popper[x-placement^="top"] .popper__arrow {
  bottom: 0;
}
</style>
